<template>
    <div class="login">
        <el-row :gutter="20">
            <el-col :span="12" :xs="0">
            </el-col>
            <el-col :span="12" :xs="24">
                <el-form class="userform">
                    <h1>Hello</h1>
                    <h2>学习vite-ts-vue3</h2>
                    <div class="formItem">
                        <el-form-item>
                            <el-input :prefix-icon="User" v-model="user.username" />
                        </el-form-item>
                        <el-form-item>
                            <el-input show-password :prefix-icon="Lock" v-model="user.password" />
                        </el-form-item>
                        <el-button :loading="load" @click="login" type="primary">登录</el-button>
                    </div>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
// 引入vue 
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
// 引入pinia 库
import useCounterStore from '@/store/modules/user'
// 导入组件
import { ElNotification } from 'element-plus';
// 导入路由
import { useRouter, useRoute } from 'vue-router'
// 返回一个pinia库对象
const userStore = useCounterStore()
// 引入方法
import { timer } from './timer.ts'
const user = reactive({
    username: 'admin',
    password: 'atguigu123',
})

const $router = useRouter()
const $route = useRoute()
const routerLink: string = ($route.query.routerLink as string)
// 登录加载中
const load = ref(false)
// 提交登录
const login = async () => {
    load.value = true
    try {
        await userStore.userLogin(user)
        load.value = false
        $router.push({ path: routerLink || '/' })
        ElNotification({
            title: timer(),
            message: '登录成功！',
            type: 'success'
        })
    } catch (error) {
        load.value = false
        ElNotification({
            type: 'Warning',
            message: (error as Error).message,

        })
    }
}
</script>

<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    background-image: url('@/assets/images/background.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .el-row {
        height: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .userform {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width: 80%;
        background-image: url('@/assets/images/login_form.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 40px;

        h1 {
            font-size: 40px;
            color: #fff;
        }

        h2 {
            font-size: 20px;
            color: #fff;
            padding: 20px 0;
        }

        .formItem {
            padding: 20px 40px;
        }

        .el-button {
            width: 100%;
        }
    }

}
</style>